<!-- 首页 -->
<template>
    <div class="page-container">
        <m-charts
            :chartData="chartData"
            ref="mChart"
            @get-chart-list="getChartList"
        />
        <div>
            <CustomImg
                :src="item"
                v-for="item in imgList"
                :key="item"
            />
        </div>

        <h1 class="">{{ $t('router.home') }}</h1>
        {{ localeCodes }}
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        <el-select
            placeholder="选择语言"
            @change="changeLang"
            v-model="locale"
            class="select"
        >
            <el-option
                :value="item"
                v-for="(item, index) in localeCodes"
                :key="index"
                >{{ $t(`language.${item}`) }}</el-option
            >
        </el-select>
        <el-select
            placeholder="选择布局"
            @change="changeLayout"
            v-model="layout"
            class="select"
        >
            <el-option
                value="left"
                label="左侧"
            />
            <el-option
                value="top"
                label="顶部"
            />
        </el-select>
        <el-button type="success"> Success </el-button>
        <el-button type="info"> Info </el-button>
        <el-button type="warning"> Warning </el-button>
        <el-button type="danger"> Danger </el-button>
        <el-icon color="red">
            <Edit />
        </el-icon>
        <client-only>
            <el-calendar v-model="date" />
        </client-only>
    </div>
</template>

<script setup lang="ts">
    import { Edit } from '@element-plus/icons-vue';
    import { useAppStore } from '@/stores/modules/app';

    import { getFlowAndPressure } from '@/api/chart';
    import mCharts from '@/components/MCharts/index.vue';

    const date = new Date();

    const chartData = {
        xData: [],
        yData: [],
        yData2: [],
    };
    const mChart = ref<InstanceType<typeof mCharts> | null>(null);

    const getChartList = async (startValue = '', endValue = '') => {
        let res = await getFlowAndPressure({
            userid: 979,
            report_ck: '',
            sn: 'NACB0088888',
            start_time: '2024-03-10',
            ac: startValue ? 'times' : 'all',
            type: 1,
            startValue,
            endValue,
        });

        let resData = res.split('###').map((str: string) => JSON.parse(str));
        chartData.xData = resData[0];
        chartData.yData = resData[1];
        chartData.yData2 = resData[2];
        mChart.value?.updateCharts(chartData);
    };

    onMounted(() => {
        getChartList();
    });

    // 降采样

    function downsampleWithExceptions(data, minNonExceptionsCount = 1) {
        let nonExceptionsCount = 0;
        let lastExceptionIndex = -1;
        const downsampledData = [];

        for (let i = 0; i < data.length; i++) {
            if (data[i] > 35 && data[i] < 15) {
                // 异常值
                if (i - lastExceptionIndex > minNonExceptionsCount) {
                    downsampledData.push(data[i]);
                    nonExceptionsCount = 0;
                }
                lastExceptionIndex = i;
            } else {
                // 非异常值
                nonExceptionsCount++;
                if (nonExceptionsCount >= minNonExceptionsCount) {
                    downsampledData.push(data[i]);
                    nonExceptionsCount = 0;
                }
            }
        }

        return downsampledData;
    }

    const { locale, localeCodes, setLocaleCookie, t } = useI18n();
    useHead({
        title: t('router.home'),
        meta: [
            { name: 'description', content: t('router.home') },
            { name: 'keywords', content: t('router.home') },
        ],
    });

    definePageMeta({
        keepalive: true, // 设置为keepAlive
    });

    const { layout } = storeToRefs(useAppStore());

    const changeLayout = (e: 'top' | 'left') => {
        useAppStore().setLayout(e);
    };

    const changeLang = (e: Parameters<typeof setLocaleCookie>[0]) => {
        setLocaleCookie(e);
    };

    const imgList = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
    ];

    // 获取流量和压力
    // const getPressureAndFlow = async () => {
    //     // let res = await useClientRequest<any>('/api/data', {
    //     let res = await getFlowAndPressure({
    //         userid: 979,
    //         report_ck: '',
    //         sn: 'NACB0088888',
    //         start_time: '2024-03-10',
    //         ac: 'all',
    //         type: 1,
    //         startValue: '',
    //         endValue: '',
    //     });
    //     console.log(res);

    //     // X轴时间JSON###压力值集合JSON###流量值集合JSON
    //     // let resData = res.split('###').map((str: string) => JSON.parse(str));
    //     // console.log('resData', res);
    //     // xTimeData.value = res.data.time;
    //     // pressureData.value = res.data.datas;
    //     // flowData.value = res.data.datas;
    // };

    onActivated(() => {
        console.log('onActivated');
    });
</script>

<style lang="scss" scoped>
    .select {
        width: 100px;
    }

    .chart {
        height: 180px;
    }
</style>
